<!--
 * @Descripttion:
 * @Author: cuiyingchun
 * @Date: 2022-11-06 02:44:46
 * @LastEditors: cuiyingchun
 * @LastEditTime: 2022-11-06 12:07:49
 * @Introduce::
-->
<template>
  <div class="content" v-loading='loading'>
    <el-breadcrumb separator="/" class="mb20">
      <el-breadcrumb-item :to="{ path: '/' }"><span class="gray"><i class="el-icon-s-home"></i>首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="green">视频详情页</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="classroom">
      <el-row class="resume">
        <el-col :span='11'>
          <img :src="datas.headUrl" alt="" srcset="" class="viewImg"/>
        </el-col>
        <el-col :span='13'>
          <h2>{{datas.videoTitle}}</h2>
          <p class="p1">{{datas.classifyNames}}</p>
          <div class="graybg">
            <p class="p2">讲师：{{datas.authorName===null||datas.authorName===''?'乡农学院':datas.authorName}}</p>
            <p class="p3">发布时间：{{datas.pubDate}}</p>
            <p class="p3">课程时长：{{datas.videoDuration}}</p>
            <p class="fen">
              综合评分：
              <el-rate
                v-model="datas.videoStars"
                disabled
                show-score
                text-color="#ff9900"
                :score-template="datas.videoStars +'.0'">
              </el-rate>
            </p>
          </div>
          <el-button class="btn" @click="watchVideosNow(datas.id,'getVideoPlayUrl')">立即观看</el-button>
          <div class="favoriteLikesGroup">
            <div class="collection" @click="collectionClick">
              <img :src="iscollection? require('../../assets/img/collection1.png'):require('../../assets/img/collection2.png')" style="width:25px" alt="">
              <span :style="{color:iscollection?'#AAAAAA':'#f59a23'}" class="abc">&ensp;{{datas.videoFavorites}}</span>
            </div>
            <div class="likesNumber" @click="likesNumberClick">
              <img :src="islikesNumber?require('../../assets/img/fabulous1.png'):require('../../assets/img/fabulous2.png')" style="width:25px" alt="">
              <span :style="{color:islikesNumber?'#AAAAAA':'#f59a23'}" class="abc">&ensp;{{datas.videoLikes}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="clContent">
        <el-col :span='17' class="clTabs">
           <el-tabs v-model="activeName">
            <el-tab-pane label="作者介绍" name="1" v-if="datas.showAuthor===1">
              <div class="panel">
                <h3>作者介绍</h3>
                <div class="panela" v-html="datas.authorRemarks"></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程简介" name="2">
              <div class="panel">
                <div class="panela" v-html="datas.videoContent"></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程目录" name="3">
              <el-row class="panellist" v-for="(item,index) in datas.videoItems" :key="index">
                <el-col :span="18" class="col1">{{item.videoContent}}</el-col>
                 <!-- 07:50:00  &emsp; -->
                <el-col :span="6" class="col2"><el-button class="btn" @click="watchVideosNow(item.videoItemId,'getVideoItemPlayUrl')">点击观看</el-button></el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane :label="'课程评价（'+total+'）'" name="4" v-if="datas.showEvaluate===1">
              <el-row class="xing">
                <el-col :span='2'><span class="big">{{datas.videoStars +'.0'}}</span></el-col>
                <el-col :span='17'>
                  <p class="p1">
                    <el-rate
                      v-model="datas.videoStars"
                      disabled
                      text-color="#ff9900">
                    </el-rate>
                  </p>
                  <p class="p2">共{{total}}条评价</p>
                </el-col>
                <el-col :span='5' class="alr">
                  <el-button type="warning" @click="submitEvaluateClick">提交评价</el-button>
                </el-col>
              </el-row>
              <div class="list">
                <el-row class="item" v-for="(item,index) in dataList" :key="index">
                  <el-col :span="3" class="avatarImg">
                    <img :src="item.creatorHeadUrl" alt="" srcset="" />
                  </el-col>
                  <el-col :span="21">
                    <p class="itemp1">
                      <span class="name">{{item.creatorName}}</span>
                      <el-rate
                        v-model="item.starNum"
                        disabled
                        text-color="#ff9900">
                      </el-rate>
                    </p>
                    <p class="itemp2">{{item.starContent}}</p>
                    <p class="itemp3">发布于 {{item.createDate}}</p>
                  </el-col>
                </el-row>
                <div class="pagination">
                  <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span='6' class="clSlide" :offset="1">
          <div class="adbox" style="margin-bottom:20px;" v-if="datas.authorHeadUrl!==null">
            <p class="p1">专家媒体</p>
            <el-row class="adItem">
              <el-col :span="5" class="avatarImg">
                <img :src="datas.authorHeadUrl" alt="" srcset="" />
              </el-col>
              <el-col :span="19">
                <p class="name">{{datas.authorName}}</p>
                <!-- <el-tag size="medium" class="tag" effect="dark" type="success">资深兽医师</el-tag> -->
              </el-col>
            </el-row>
            <p class="p2">扫码关注获取更多信息</p>
            <el-row class="row">
              <el-col class="col" :span="12">
                <img :src="datas.authorWxUrl" alt="" srcset="" class="qr"/>
                <span>公众号</span>
              </el-col>
              <el-col class="col" :span="12">
                <img :src="datas.authorWxVideoUrl" alt="" srcset="" class="qr"/>
                <span>视频号</span>
              </el-col>
            </el-row>
          </div>
          <div class="adbox">
            <p class="p1">相关课程</p>
            <div v-for="(item,index) in datas.relateVideos" :key="index" @click="videoClick(item.id)">
              <el-row class="vItem">
                <el-col :span="10" class="vImg">
                  <img :src="item.headUrl" alt="" srcset="" />
                </el-col>
                <el-col :span="14">
                  <h3>{{item.videoTitle}}</h3>
                  <p class="ptag"><el-tag size="medium" class="tag" effect="dark" type="success">{{item.classifyNames}}</el-tag></p>
                  <p class="pclick">{{item.videoPlayCount}}次观看</p>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <video id="video" controls width="100%" height="480" autoplay>
        <source :src="videoSrc" type="video/mp4">
      </video>
    </el-dialog>
    <el-dialog
      v-if="isSubmitEva"
      :visible.sync="isSubmitEva"
      width="400px"
      title="评价"
      :before-close="handleClose">
      <div>
        <div style="font-weight:bold;margin-bottom:10px;font-size:17px;"><span style="color:red;">*</span>总体评价</div>
        <div><el-rate v-model="starNum"></el-rate></div>
        <div style="font-weight:bold;margin-bottom:10px;font-size:17px;margin-top:25px;"><span style="color:red;">*</span>评价内容</div>
        <div>
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8}"
            v-model="starContent">
          </el-input>
        </div>
      </div>
      <template slot="footer">
          <el-button type="primary" @click="submitEvaQuery()" v-loading="subEvaLoading">确认</el-button>
          <el-button @click="isSubmitEva = false">取消</el-button>
        </template>
    </el-dialog>
  </div>
</template>
<script>
import { recommend, evalute } from './data'
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      dialogVisible: false,
      viewImg: require('../../assets/img/img1.png'),
      avatarImg: require('../../assets/img/zjtj.png'),
      collectImg: require('../../assets/img/headPortrait.png'),
      activeName: '1',
      recommend,
      evalute,
      iscollection: true,
      collection: 43,
      islikesNumber: true,
      likesNumber: 89,
      limit: 10,
      page: 1,
      id: '',
      datas: {},
      mixinViewModuleOptions: {
        getDataListURL: '/web/video/getStarsPage4Web',
        getDataListIsPage: true
      },
      videoSrc: '',
      loading: false,
      isSubmitEva: false,
      starNum: 0,
      starContent: '',
      subEvaLoading: false
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.id = this.$route.query.id
      this.getDataList()
      this.getVideoList()
    },
    // 获取视频信息
    getVideoList () {
      this.loading = true
      this.$http.get(`/web/video/getVideoDetail/${this.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          this.$message.error(res.msg)
          return false
        }
        this.datas = res.data
        this.loading = false
        if (res.data.showAuthor !== 1) {
          this.activeName = '2'
        }
      }).catch(() => { this.loading = false })
    },
    // 点击收藏按钮
    collectionClick () {
      if (this.iscollection) {
        this.doFavorites('doFavorites')
      } else {
        this.doFavorites('doUnFavorites')
      }
    },
    // 收藏视频 取消收藏视频
    doFavorites (name) {
      let obj = {
        // creator暂时不传
        videoId: this.datas.id
      }
      this.$http.post(`/xnkt/tbvideofavorites/${name}`, obj).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.$set(this.datas, 'videoFavorites', res.data)
        this.iscollection = !this.iscollection
      }).catch(() => {})
    },
    // 点击点赞按钮
    likesNumberClick () {
      if (this.islikesNumber) {
        this.doLike('doLike')
      } else {
        this.doLike('doUnLike')
      }
    },
    // 点赞视频 取消点赞视频
    doLike (name) {
      let obj = {
        // creator暂时不传
        videoId: this.datas.id
      }
      this.$http.post(`/xnkt/tbvideolikes/${name}`, obj).then(({ data: res }) => {
        if (res.code !== 0) {
          this.$message.error(res.msg)
          return false
        }
        this.$set(this.datas, 'videoLikes', res.data)
        this.islikesNumber = !this.islikesNumber
      }).catch(() => {})
    },
    // 点击观看视频
    watchVideosNow (id, name) {
      this.loading = true
      this.$http.get(`/web/video/${name}/${id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          this.$message.error(res.msg)
          return false
        }
        this.loading = false
        this.videoSrc = res.data
        this.dialogVisible = true
      }).catch(() => { this.loading = false })
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 点击相关课程
    videoClick (id) {
      this.loading = true
      this.$router.push({
        name: `classroomview`,
        query: { id }
      })
      this.init()
    },
    // 点击提交评价
    submitEvaluateClick () {
      this.starNum = 0
      this.starContent = ''
      this.isSubmitEva = true
    },
    // 确认提交评价
    submitEvaQuery () {
      this.subEvaLoading = true
      let obj = {
        starNum: this.starNum,
        starContent: this.starContent,
        videoId: this.id
      }
      this.$http.post(`/xnkt/tbvideostars/saveStar`, obj).then(({ data: res }) => {
        if (res.code !== 0) {
          this.subEvaLoading = false
          this.$message.error(res.msg)
          return false
        }
        this.isSubmitEva = false
        this.subEvaLoading = false
        this.getDataList()
      }).catch(() => { this.subEvaLoading = false })
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  .mb20{margin-bottom: 20px;}
  .gray{color: #C2C6CC;}
  .green{
    color:#2b970d;
  }
}
.classroom{
  .resume{
    padding: 20px;
    border: 1px solid #E4E7ED;
    .viewImg{
      width: 486px;
      height: 340px;
      margin-right: 20px;
    }
    .graybg{
      background-color: #F5F7FA;
      padding: 10px 20px;
      margin-top: 20px;
      p{
        margin: 5px 0;
      }
      p.p2{
        font-size: 16px;
        color: #606266;
      }
      p.fen{
        margin-top: 30px;
        color: #333333;
        font-weight: bold;
        font-size: 16px;
        .yellow{
          color: #FFBF00;
          font-size: 24px;
        }
      }
    }
    .btn{background-color: #26840C;color: #fff;margin-top: 40px;padding: 15px 40px;}
  }
  .clContent{
    margin-top: 30px;
    .clTabs{
      min-height: 700px;
      border: 1px solid #E4E7ED;
      padding: 10px 20px;
      /deep/ .el-tabs__item.is-active, /deep/.el-tabs__item:hover{
        color: #26840c;
      }
      /deep/ .el-tabs__active-bar{
        background-color: #26840C;
      }
      .panel{
        padding: 30px;
        .panela{
          color: #333333;
          font-size: 14px;
          line-height: 1.6;
        }
      }
      .panellist{
        line-height: 35px;
        background-color: #F5F7FA;
        // border-bottom: 1px solid #E4E7ED;
        margin-bottom: 10px;
        padding: 6px 15px;
        &:last-child{border-bottom: 0;}
        .col1{
          color: #333;
        }
        .col2{
          text-align: right;
          .btn{
            background-color: #26840C;color: #fff;
          }
        }
      }
      .xing{
        padding: 20px 10px;
        border-bottom: 1px solid #E4E7ED;
        .big{
          color: #f17b2e;
          font-size: 40px;
          font-weight: bold;
        }
        .p1{color: #f17b2e;font-size: 20px;margin: 0;}
        .p2{
          color: #C2C6CC;
          font-size: 14px;
          margin: 4px 0 4px 4px;
        }
        .alr{text-align: right;}
      }
      .list{
        .item{
          border-bottom: 1px solid #E4E7ED;
          padding: 10px 0;
           &:last-child{border-bottom: 0;}
          .avatarImg{
            img{
              width: 70px;
              height: 70px;
              border-radius: 50%;
            }
            text-align: center;
          }
          .itemp1{
             color: #f17b2e;
              font-size: 14px;
              margin: 4px 0;
            .name{
              color: #333;
              font-size: 14px;
              margin-right: 10px;
            }
          }
          .itemp2,.itemp3{margin: 10px 0;color: #999;}
        }
      }
    }
    .clSlide{
      .mt20{margin-top: 20px;}
      .adbox{
          width: 100%;
          border: 1px solid #eee;
          .p1{
            padding: 15px;
            margin: 0;
            border-bottom: 1px solid #eee;
            font-weight: bold;
          }
          .adItem{
              padding: 10px;
              .avatarImg{
                img{
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                }
                text-align: center;
              }
              .name{
                color: #333;
                font-size: 14px;
                margin: 3px 0;
              }
              .tag{
                background-color: #26840C;
                border-color: #26840C;
                height: 25px;
                line-height: 25px;
                padding: 0 6px;
                font-size: 12px;
              }
            }
          .p2{
            text-align: center;
            margin: 10px 0;
          }
          .row{
            padding-bottom: 30px;
          }
          .col{
            text-align: center;
            padding: 10px;
            .qr{
              width: 90px;
              height: 90px;
              display: block;
              margin: 0 auto 10px;
            }
          }
          .vItem{
            padding: 10px;
            cursor: pointer;
            .vImg{
                img{
                  width: 110px;
                  height: 80px;
                }
              }
              h3{margin: 3px 0;font-size: 14px;}
              .pclick{
                color: rgb(158, 156, 156);
                font-size: 12px;
                margin: 15px 0 0 0;
              }
              .ptag{
                margin: 3px 0;
                .tag{
                  background-color: #26840C;
                  border-color: #26840C;
                  height: 25px;
                  line-height: 25px;
                  padding: 0 6px;
                  font-size: 12px;
                  max-width: 155px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-box-orient: vertical;
                }
              }
          }
        }
    }
  }
}
.pagination{
      width: 100%;
      text-align: center;
      margin: 20px 0;

      .paging /deep/ .el-pager li{
        background-color: inherit;
        border: 1px solid #ddd;
        margin: 0 4px;
        color: #333333;
      }
      /deep/ .el-pagination .btn-next,/deep/ .el-pagination .btn-prev{
        border: 1px solid #ddd;
        margin: 0 4px;
      }
      .paging /deep/ .el-pager li.active{
        border-color: #2b970d;
        color: #2b970d;
      }
    }
.favoriteLikesGroup{
    font-size: 13px;
    color: #AAAAAA;
    position: absolute;
    right: 24px;
    bottom: 27px;
  }
  .collection{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 10px;
  }
  .likesNumber{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 10px;
    margin-left: 15px;
  }
  .abc{
    font-size: 16px;
  }
</style>
